<!--
 * @FilePath     : /study_code/html/input-radio-iconfont.html
 * @Description  : input 复选 iconfont 优化
 * @Date         : 2025-04-26 08:09:36
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-26 08:09:39
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <!-- <link rel="stylesheet" href="style.css" /> -->
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      [el-checkbox] .iconfont {
        font-size: 24px;
      }

      .sex_select {
        display: none;
      }

      input {
        display: none;
      }

      .iconfont {
        font-size: 24px;
      }

      /*
      问题：字体颜色无法设置
      .icon-fuxuankuangyuan {
        color: #e5e5e5;
      }
      .icon-yuanfuxuankuang {
        color: red;
      } */
    </style>
  </head>
  <body>
    <input type="checkbox" title="a" id="sex" />
    <span id="sexbox1" class="iconfont icon-fuxuankuangyuan sex_select"></span>
    <span id="sexbox2" class="iconfont icon-yuanfuxuankuang sex_select"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      /*  */

      $(() => {
        // 初始判断
        if ($('#sex').attr('checked')) {
          $('#sexbox2').show()
          $('#sexbox1').hide()
        } else {
          $('#sexbox1').show()
          $('#sexbox2').hide()
        }

        function judgeSelect() {
          var value = $('#sex').attr('checked')
          console.log(value)
          if (value) {
            $('#sexbox1').show()
            $('#sexbox2').hide()
            $('#sex').removeAttr('checked')
          } else {
            $('#sexbox2').show()
            $('#sexbox1').hide()
            $('#sex').attr('checked', true)
          }
        }

        $('.sex_select').on('click', judgeSelect)
      })
    </script>
  </body>
</html>
